<!--线下预约表单组件-->
<template>
    <div class="appointment-container">
        <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="110px" class="demo-ruleForm">
            <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="种植作物" prop="plantName">
                <el-input v-model="ruleForm.plantName" placeholder="请输入种植的作物"></el-input>
            </el-form-item>
            <el-form-item label="作物详细信息" prop="plantDetail">
                <el-input v-model="ruleForm.plantDetail" placeholder="请输入作物详细信息"></el-input>
            </el-form-item>
            <el-form-item label="作物条件" prop="plantCondition">
                <el-input v-model="ruleForm.plantCondition" placeholder="请输入作物生长状况"></el-input>
            </el-form-item>
            <el-form-item label="土壤条件" prop="soilCondition">
                <el-input v-model="ruleForm.soilCondition" placeholder="请输入土壤状况"></el-input>
            </el-form-item>
            <el-form-item label="面积" prop="area">
                <el-input v-model="ruleForm.area" placeholder="请输入面积"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入电话"></el-input>
            </el-form-item>

            <el-form-item style="float:right;">
                <el-button type="success" @click="submitForm(ruleFormRef)">去预约</el-button>
            </el-form-item>
        </el-form>

        <div style="margin: 0 auto; width: 100%;height:35px;line-height: 35px;display: flex;justify-self: start;">
            <el-button style="margin: 0 auto; width: 80px;height:35px;line-height: 35px;"
                @click="backHandle">
                <el-icon>
                    <Close />
                </el-icon>取 消
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { addReserve } from '@/api/order'
import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()


interface RuleForm {
    address: string,
    plantName: string,
    plantDetail: string,
    plantCondition: string,
    soilCondition: string,
    area: string,
    phone: string,
    expertName: string,
    status: number
}

const ruleForm = reactive({
    address: '',
    plantName: '',
    plantDetail: '',
    plantCondition: '',
    soilCondition: '',
    area: '',
    phone: '',
    expertName: route.query.id,
    status: 0
})


const rules = reactive({
    address: [
        { required: true, message: '请输入地址', trigger: 'blur' }
    ],
    plantName: [
        { required: true, message: '请输入种植作物', trigger: 'blur' }
    ],
    plantDetail: [
        { required: true, message: '请输入作物详细信息', trigger: 'blur' }
    ],
    plantCondition: [
        { required: true, message: '请输入作物条件', trigger: 'blur' }
    ],
    soilCondition: [
        { required: true, message: '请输入土壤条件', trigger: 'blur' }
    ],
    area: [
        { required: true, message: '请输入面积', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入电话', trigger: 'blur' }
    ]
})

// 表单对象
const ruleFormRef = ref<FormInstance>()

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ruleForm.expertName = route.query.id as string
            addReserve(ruleForm).then(res => {
                if (res.flag) {
                    ElMessage({
                        message: res.message,
                        type: 'success',
                    })
                    router.push("/index/guide").catch((err) => err);
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'error',
                    })
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 返回
const backHandle = () => {
    router.back();
}


</script>

<style lang="scss" scoped>
.appointment-container {
    width: 900px;
    height: 100%;
    text-align: left;
    background: #fff;
    margin: 10px auto;
    padding: 10px 20px;
}
</style>